<!DOCTYPE html>
<html lang="en" data-color-mode="dark" data-light-theme="light" data-dark-theme="dark">
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, shrink-to-fit=no"
		/>
		<link
			href="https://cdn.jsdelivr.net/npm/@primer/css@16.0.0-rc.765d5fa/dist/primer.css"
			rel="stylesheet"
		/>

		<script src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/umd/perspective.js"></script>
		<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/umd/material-dense.dark.css">

		<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer"></script>
		<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid"></script>

		<title>Haruspex</title>

		<style>
			td {
				text-align: left !important;
				padding: 0 5px !important;
				color: var(--color-text-primary) !important;
			}

			tr:hover td {
				background-color: var(--color-bg-tertiary) !important;
			}

			th {
				color: var(--color-text-secondary);
			}

			regular-table::-webkit-scrollbar-thumb {
				background-color: var(--color-bg-tertiary);
			}
			regular-table:hover::-webkit-scrollbar-thumb {
				background-color: var(--color-bg-overlay);
			}

			regular-table::-webkit-scrollbar-track {
				background: none;
			}

			.psp-align-right {
				text-align: left;
			}

			perspective-viewer {
				background-color: var(--color-bg-canvas);
				font-family: sans-serif;
				--interface--font-family: sans-serif;
				--interface-monospace--font-family: monospace;
				--background-color: var(--color-bg-canvas);
				--plugin--background: var(--color-bg-canvas-inset);
				--inactive--color: var(--color-text-secondary);
				--active--color: var(--color-scale-blue-5);
				--select--background-color: transparent;

				height: calc(100vh - 166px);
				width: calc(100% - 48px);
				margin: 48px 24px;
			}
		</style>
	</head>
	<body class="color-bg-canvas">
		<div class="Header">
			<div class="Header-item">
				<a href="/" class="Header-link f4 d-flex flex-items-center">
					<img src="/static/logo.svg" height="32" width="32" class="mr-2"></img>
				</a>
			</div>
			<div class="Header-item">
				<a id="grid-link" href="#" class="Header-link">Grid</a>
			</div>
			<div class="Header-item">
				<a id="list-link" href="#" class="Header-link">List</a>
			</div>
			<div class="Header-item">
				<a href="https://github.com/can1357/haruspex/" class="Header-link">Github</a>
			</div>
		</div>

			<perspective-viewer></perspective-viewer>
		<script src="/static/listview.js" type="module"></script>
	</body>
</html>
